<template>
    <div style="overflow: hidden;">
        <canvas ref="canvas"></canvas>
    </div>
</template>

<script>
import OnEvent from '../common/OnEvent'

export default {
    name: 'Picture',
    extends: OnEvent,
    props: {
        propValue: {
            type: Object,
            required: true,
            default: () => {},
        },
        element: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            width: 0,
            height: 0,
            img: null,
            canvas: null,
            ctx: null,
            isFirst: true,
        }
    },
    watch: {
        'element.style.width': function () {
            this.drawImage()
        },
        'element.style.height': function () {
            this.drawImage()
        },
        'propValue.flip.vertical': function () {
            this.mirrorFlip()
        },
        'propValue.flip.horizontal': function () {
            this.mirrorFlip()
        },
    },
    mounted() {
        this.canvas = this.$refs.canvas
        this.ctx = this.canvas.getContext('2d')
        this.drawImage()
    },
    methods: {
        drawImage() {
            const { width, height } = this.element.style
            this.canvas.width = width
            this.canvas.height = height
            if (this.isFirst) {
                this.isFirst = false
                this.img = document.createElement('img')
                this.img.src = this.propValue.url
                this.img.onload = () => {
                    this.ctx.drawImage(this.img, 0, 0, width, height)
                    this.mirrorFlip()
                }
            } else {
                this.mirrorFlip()
            }
        },

        mirrorFlip() {
            const { vertical, horizontal } = this.propValue.flip
            const { width, height } = this.element.style
            const hvalue = horizontal ? -1 : 1
            const vValue = vertical ? -1 : 1

            // 清除图片
            this.ctx.clearRect(0, 0, width, height)
            // 平移图片
            this.ctx.translate(width / 2 - width * hvalue / 2, height / 2 - height * vValue / 2)
            // 对称镜像
            this.ctx.scale(hvalue, vValue)
            this.ctx.drawImage(this.img, 0, 0, width, height)
            // 还原坐标点
            this.ctx.setTransform(1, 0, 0, 1, 0, 0)
        },
    },
}
</script>
